{% extends 'manager/base/base.html' %}
{% load bootstrap_pagination %}
{% block css %}

{% endblock %}

{% block navbar %}
  <div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <ul class="nav navbar-nav list-inline navbar-left">
        <li class="list-inline-item">
          <button class="button-menu-mobile open-left">
            <i class="mdi mdi-menu"></i>
          </button>
        </li>
        <li class="list-inline-item">
          <h4 class="page-title">背景音乐列表</h4>
        </li>
      </ul>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card-box table-responsive">
          <h4 class="m-t-0 header-title"><b></b></h4>
          <p class="text-muted font-14 m-b-10">
            <form class="form-inline" action="">
              <div>
                <input name="name" class="form-control" placeholder="音乐名称" value="{{ name|default_if_none:'' }}">
                <button type='submit' class='btn btn-primary m-b-6'>搜索</button>&nbsp;&nbsp;<b>共 {{ total }} 条数据</b>
              </div>
            </form>
            <br>
            <div>
              <a href="javascript:;" class='btn btn-success m-b-6' data-toggle="modal" data-target="#addModal">创建</a>
              <a class='btn btn-danger m-b-6' href="javascript:;" onclick="del_modal_show()">删除</a>
            </div>
          </p>
          <table class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th width="2%"><input type="checkbox" name="check_all" /></th>
                <th>音乐名称</th>
                <th>音乐地址</th>
                <th>音乐封面</th>
                <th>演唱者</th>
                <th>创建时间</th>
                <th>最后更新时间</th>
              </tr>
            </thead>
            <tbody>
              <form id="item_ids_form">
              {% for item in data_list %}
              <tr>
                <td><input type="checkbox" name="item_ids" value="{{ item.id }}"/></td>
                <td>{{ item.name }}</td>
                <td data-toggle="tooltip" data-placement="bottom" title="{{ item.url }}">{{ item.url|slice:"30" }}</td>
                <td><a i="{{ item.cover }}" class="Slide One"><img height="30px" width="60px" src="{{ item.cover }}" alt="{{ item.cover }}"></a></td>
                <td>{{ item.artist }}</td>
                <td>{{ item.created_time|date:'Y-m-d H:i' }}</td>
                <td>{{ item.last_update|date:'Y-m-d H:i' }}</td>
              </tr>
              {% endfor %}
              </form>
            </tbody>
          </table>
          <div class="pull-right">
            {% bootstrap_paginate data_list url_extra_args=params range=10 show_first_last="true" %}
          </div>
        </div>
      </div>

      <!-- Add Modal -->
      <div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myLargeModalLabel">新增背景音乐</h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form action="{% url 'music_add' %}" method="post">
              {% csrf_token %}
              <div class="modal-body">
                <div class="form-group">
                  <h5>音乐名称 <span class="text-danger">*</span></h5>
                  <div class="controls">
                    <input name="name" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <h5>音乐地址 <span class="text-danger">*</span></h5>
                  <div class="controls">
                    <input name="url" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <h5>音乐封面 <span class="text-danger">*</span></h5>
                  <div class="controls">
                    <input name="cover" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <h5>演唱者 <span class="text-danger"></span></h5>
                  <div class="controls">
                    <input name="artist" class="form-control">
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-inverse" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-success">提交</button>
              </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>

      <div id="del_musics_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myLargeModalLabel">删除背景音乐</h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form>
              {% csrf_token %}
              <div class="modal-body">
                <h4>确认删除背景音乐？</h4>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-inverse" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="delete_musics()">提交</button>
              </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>

    </div>
    <!-- end row -->
  </div> <!-- container -->
{% endblock %}

{% block js %}
  <script>
  $(function() { $("[data-toggle='tooltip']").tooltip(); });
  // 反选和全选
  select_and_reverse();

  // 删除模态框
  function del_modal_show() {
    $("#del_musics_modal").modal('show');
  }

  // 批量删除背景音乐
  function delete_musics() {
    $("#del_musics_modal").modal('hide');
    var formData = $("#item_ids_form").serialize();
    $.ajax({
      url: "{% url 'music_del' %}",
      type: 'POST',
      data: formData,
      success: function (data) {
        if (data.code == ERROR_CODE.SUCCESS) {
          msg_info("删除成功，2秒后自动刷新", 'success')
          setTimeout(function(){window.location.href = "{% url 'music_list' %}";}, 2000);
        } else if (data.code == ERROR_CODE.PARAM_ERROR) {
          msg_info('参数错误', 'error');
        }
      },
      error: function () {
        msg_info('删除失败!', 'error');
      }
    });
  }
</script>
{% endblock %}
